import React, { useState } from 'react';
import { Modal, Button } from 'antd';
import './ModalA.less'


function ModalA(props) {
  console.log(111,props.data)
  const [isModalVisible, setIsModalVisible] = useState(false);
  
  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <div className="modala">
      { <a  onClick={showModal}>
        查看
      </a> }
      <Modal className="aaa" centered={true} title="查看" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} footer={<Button id="footbtn" onClick={handleCancel}>返回</Button>}  destroyOnClose={true}>
                
                 <div className="modalBox">
                  <div>
                    <span >设备编号</span>
                    <span >{props.data.num}</span>
                  </div>
                  <div id="bbb">
                    <span>设备名称</span>
                    <span id="aaa">{props.data.name}</span>
                  </div>
                  <div>
                    <span>MAC地址</span>
                    <span>{props.data.mac}</span>
                  </div>
                  <div>
                    <span>设备位置</span>
                    <span>{props.data.where}</span>
                  </div>
                  <div>
                    <span>运行状态</span>
                    <span>{props.data.movestate}</span>
                  </div>
                  <div>
                    <span>运行状态</span>
                    <span>{props.data.state}</span>
                  </div>
                  <div>
                    <span>创建时间</span>
                    <span>{props.data.time}</span>
                  </div>
                </div>
                 
      </Modal>
    </div>
  );
};

export default ModalA